<template>
  <div class="header">
    <div class="left">
      <img class="logo" :src="filePath" />
      <span>{{ name }}</span>
    </div>
    <div class="center">
      <BasicMenu></BasicMenu>
    </div>
    <div class="right flex">
      <img class="avater" src="../../assets/images/header/avater.png" />
      <a-popover
        placement="bottom"
        v-model:visible="visible"
        arrow-point-at-center
        trigger="hover"
        :overlayClassName="'user-popover'"
      >
        <template #content>
          <div @click="changePwd" class="content-text">修改密码</div>
          <div @click="logout" class="content-text">退出登录</div>
        </template>
        <span class="user-name">{{ usesrName }} </span>
        <CaretUpOutlined v-show="visible" />
        <CaretDownOutlined v-show="!visible" />
      </a-popover>
    </div>
  </div>
  <change-password ref="changePasswordModal"></change-password>
</template>

<script lang="ts" setup>
// import { logOut } from '@/api/login'
import { useRouter } from 'vue-router'
import { getStorage } from '@/utils/cache/storage'
import { useInfoStore, platformStore } from '@/store'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
import { ref, onMounted } from 'vue'
import ChangePassword from '@/components/ChangePassword.vue'

import BasicMenu from '../BasicMenu/index.vue'

const usesrName = getStorage('username_nick')
const userStore = useInfoStore()
const platStore = platformStore()
const router = useRouter()
const visible = ref(false)
const changePasswordModal = ref()
const name = ref(platStore.name)
const filePath = ref(platStore.filePath)
const width = ref()
const height = ref()
onMounted(() => {
  const img = new Image()
  img.src = filePath.value
  img.onload = () => {
    width.value = img.width / 100
    height.value = img.height / 100
  }
})
const changePwd = () => {
  changePasswordModal.value.showModal()
}
// 登出
const logout = () => {
  userStore.logout()
  router.push('/login')
  // logOut().then(() => {
  //   userStore.logout()
  //   router.push('/login')
  // })
}
</script>

<style lang="less" scoped>
// @import '../../style/header.less';

@header-height: 3.75rem;

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: @header-height;
  // background-color: @bg-color;
  // box-shadow: 0 5px 8px 0 rgb(204 204 204 / 40%);
  border-bottom: 0.063rem solid #e5e6eb;

  .left {
    display: flex;
    align-items: center;
    padding-left: 1.875rem;

    .logo {
      display: inline;
      margin-right: 1.25rem;
      height: 2rem;
    }

    span {
      font-size: 1.25rem;
      color: #000;
      font-weight: bold;
    }
  }

  .center {
    height: 100%;
    flex: 1;
  }

  .right {
    align-items: center;
    padding-right: 1.875rem;
    font-size: 1rem;

    .avater {
      margin-right: 0.875rem;
      width: 2.25rem;
      height: 2.25rem;
    }

    :deep(.anticon) {
      position: relative;
      bottom: 0.185rem;
      margin-left: 0.5rem;
    }

    .user-name {
      cursor: pointer;
    }
  }
}

.user-popover {
  .content-text {
    margin-bottom: 0.625rem;
    cursor: pointer;
  }
}
</style>
